<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/weui/2.4.3/style/weui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2493372_vdk2esj5ru.css">
    <title>Document</title>
</head>

<body>
    <div class="movie">
        <div class="movie-head">
            <i class="iconfont icon-leftarrow1f"></i>
            <span class="title">影片详情</span>


        </div>
        <div class="movie-info">

            <div class="movie-info__desc">
                <div class="info-pic">
                    <img
                        src="https://p1.meituan.net/moviemachine/58732574fbc2f64c04c3e825c058da7f16742753.jpg@300w_414h_80q_1e_1c">
                </div>
                <div class="info-container">
                    <h2 class="name">哥斯拉大战金刚</h2>
                    <p class="en-name">Godzilla vs Kong</p>
                    <p class="pick">
                        <i class="iconfont icon-Like-copy"></i>
                        <span>两大怪兽之争，谁与争锋？</span>
                    </p>
                    <p class="type">动作/冒险/科幻</p>
                    <p class="playtime">2021-03-26 8：00 中国大陆上映</p>
                    <div class="btn-wrap">
                        <div class="flex" id="see">
                            <i class="iconfont icon-xin"></i>
                            想看
                        </div>
                        <div class="flex" id="collection">
                            <i class="iconfont icon-xing"></i>
                            看过
                        </div>
                    </div>
                </div>
       
                
            
                <div id="toast">
                    <div class="weui-mask_transparent">

                    </div>
                    <div class="weui-toast">
                        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                        <p class="weui-toast__content">已标注为想看</p>
                    </div>
                </div>



            </div>
            <div class="movie-info__rate">
                <div class="rate-title">
                  <div class="rate-title__left">
                    <i class="iconfont icon-maoyanyule"></i>
                    猫眼购票评分
                </div>
                <div class="rate-title__right">
                  <span class="want">506,799</span>人想看
                  <span class="watched">29,951,749</span>看过
                  <i class="iconfont icon-arrow-right"></i>
                </div>
              </div>
              <div class="rate-detail">
      
              </div>
            </div>
            

        </div>
        
        
        <script>
            var wacthBtn = document.getElementById('see')
            var toast = document.getElementById('toast')
            var flag = false
            var toastContent = document.querySelector('.weui-toast__content')
            var iconXin = document.querySelector('.icon-xin')
            
            
            
            var seeBtn = document.getElementById('collection')
            var toast2 = document.getElementById('toast')
            var flag2 = false
            var toastContent2 = document.querySelector('.weui-toast__content')
            var iconXing = document.querySelector('.icon-xing')

            seeBtn.addEventListener('click',function(){
                flag2 = !flag2
                toast.style.display = 'block'
                var toastText , xingcolor
                if(flag2){
                    toastText = '已收藏'
                    xingcolor = 'yellow'

                }
                else{
                    toastText = '已取消'
                    xingcolor ='#fff'
                }
                    toastContent.innerHTML = toastText
                    iconXing.style.color = xingcolor

                setTimeout(function(){
                    toast.style.display = 'none'
                },2000)
                
            })
            
            wacthBtn.addEventListener('click',function(){
                
                flag = !flag
                toast.style.display = 'block'
                var toastText ,hreatcolor

                if(flag){
                    toastText = '已标注为想看'
                    hreatcolor = 'red'
                    
                }
                else{
                    
                    toastText = '已取消想看'
                    hreatcolor='#fff'

                }
                toastContent.innerHTML = toastText
                iconXin.style.color = hreatcolor

                setTimeout(function(){
                    toast.style.display = 'none'
                },2000)
            })

        </script>
</body>

</html>